<!--
  首页
-->
<template>
  <div class="content-wrapper flex-row">
    <div class="left-sidebar">
      <div v-for="(item, index) in navData" :key="index">
        <div class="title">{{ item.name }}</div>
        <div class="mb-20">
          <router-link
            class="link mb-10"
            :to="path.src"
            v-for="(path, index) in item.list"
            :key="index"
          >
            <i class="el-icon-d-arrow-right"></i>
            {{ path.title }}
          </router-link>
        </div>
      </div>
    </div>
    <div class="right-sidebar flex-1">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data () {
    return {
      navData: [
        {
          name: 'OLTP数据库',
          list: [
            {
              title: '云原生数据库 TeleDB for MySQL',
              src: '/detail/nav1'
            },
            {
              title: '云原生数据库 TeleDB for OpenGauss',
              src: '/detail/nav2'
            }
          ]
        },
        {
          name: 'OLAP数据库',
          list: [
            {
              title: '云原生数据库 TeleDB for OLAP',
              src: '/detail/nav3'
            }
            // {
            //   title: '云原生数据分析引擎 DLC',
            //   src: '/detail/nav4'
            // }
          ]
        },
        {
          name: 'NEWSQL数据库',
          list: [
            {
              title: '云原生数据库 TeleDB for HTAP',
              src: '/detail/nav5'
            }
          ]
        },
        {
          name: 'NoSql数据库',
          list: [
            {
              title: '云原生数据库 TeleDB for MemDB',
              src: '/detail/nav6'
            },
            {
              title: '云原生数据库 TeleDB for DDS',
              src: '/detail/nav7'
            },
            {
              title: '云原生数据库 TeleDB for HBase',
              src: '/detail/nav8'
            },
            {
              title: '云原生数据库 TeleDB for TSDB',
              src: '/detail/nav9'
            },
            {
              title: '云原生数据库 TeleDB for InfluxDB',
              src: '/detail/nav10'
            }
          ]
        },
        {
          name: '数据库生态工具',
          list: [
            {
              title: '数据传输服务 TeleDB-DTS',
              src: '/detail/nav11'
            },
            {
              title: '数据库备份 TeleDB-DBS',
              src: '/detail/nav12'
            },
            {
              title: '数据管理 TeleDB-DMS',
              src: '/detail/nav13'
            },
            {
              title: '数据库网关 TeleDB-GW',
              src: '/detail/nav14'
            },
            {
              title: '数据库和应用迁移评估 TeleDB-DAM',
              src: '/detail/nav15'
            }
          ]
        },
        {
          name: '数据库管理工具',
          list: [
            {
              title: '数据库资源与生命周期管理 TeleDB-DCP',
              src: '/detail/nav16'
            }
          ]
        }
      ]
    }
  },
  created () {},
  methods: {},
  computed: {}
}
</script>
<style scoped lang="scss">
.content-wrapper {
  padding: 30px 60px 0;
}
.left-sidebar {
  padding: 30px;
  margin-right: 60px;
  color: $--color-white;
  background: rgba(255, 255, 255, 0.03);
  .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  .link {
    display: block;
    color: rgba(255, 255, 255, 0.8);
  }
  .router-link-active {
    color: $--color-primary;
  }
}
</style>
